<template>
<div class="dz">
    <div class="header">
        <span>第 <span class="no">{{no}}</span> 关</span>
        <span class="fen"><span class="no">{{fen}}</span> 分</span>
    </div>
    <div class="box">
            <div class="topZhuan" ref='topZhuan'></div>
            <div class="ball" ref='ball'></div>
            <div class="ban"  ref='ban'>底盘</div>
            <button class="start" @click='start' v-show="begin">开始游戏</button>
        </div>
</div>

</template>

<script>
import { getCurrentInstance, onMounted,ref } from 'vue'
export default {
  setup(){
    let {ctx}=getCurrentInstance()

    let begin=ref(true)
    let speed=50    //运动速度
    let timer=null  //定时器
    let ball=null   //球
    let ban=null    //底盘
    let topZhuan=null  //砖
    let no=ref(1)
    let fen=ref(0)
    onMounted(()=>{
      ball=ctx.$refs.ball
      ban=ctx.$refs.ban
      topZhuan=ctx.$refs.topZhuan

      createZhuan(32)

    })


    //开始游戏
    function start(){
      begin.value=false
      move(ball)
      drag(ban)
    }
     //判断是否碰撞
        function pen(ball,zhuan){
            let ispend=true
            if(ball.offsetTop<zhuan.offsetTop||ball.offsetTop>(zhuan.offsetTop+parseInt(zhuan.style.height) )
              ||ball.offsetLeft<zhuan.offsetLeft||ball.offsetLeft>(zhuan.offsetLeft+parseInt(zhuan.style.width))){
                ispend=false
            }else{
                ispend=true
            }
            return ispend
        }
        //获取颜色
        function getColor(){
            let r=Math.round(Math.random()*255) 
            let g=Math.round(Math.random()*255) 
            let b=Math.round(Math.random()*255)
            let opstily=Math.random()
            let color=`rgb(${r},${g},${b},${opstily})`
            return color
        }
    function createZhuan(num){
        topZhuan.innerHTML=""
        for(let i=0;i<num;i++){
            let zhuan=document.createElement('div')
             zhuan.style.backgroundColor=getColor()
             zhuan.style.width='100px'
             zhuan.style.height='20px'
             zhuan.style.left=(i%4)*100+'px'
             zhuan.style.top=(Math.floor(i/4)*20)+'px'
             zhuan.style.border='1px solid black'
             zhuan.style.position='absolute'
             topZhuan.appendChild(zhuan)
          }
    }
    function move(node){
       let speedx=parseInt(Math.random()*3+5)
       let speedy=parseInt(Math.random()*3+5)
        timer=setInterval(()=>{
           if(node.offsetLeft<=0||node.offsetLeft>=390)
              {speedx=speedx*(-1)}
           if(node.offsetTop<=0){
               speedy=speedy*(-1)
           }
           if(node.offsetTop>390){
               //游戏结束
               clearInterval(timer)
               ctx.$confirm('GAME OVER  你的总分是'+fen.value+' 分', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                    }).then(() => {
                        begin.value=true
                        fen.value=0
                        no.value=1
                        createZhuan(32)
                        ball.style.left='200px'
                        ball.style.top='370px'
                        ban.style.left='150px'
                        ban.style.bottom='0'
                    })
           }
           if(pen(ball,ban)){
               //小球与板碰撞
               speedy=speedy*(-1)
           }
           node.style.left=node.offsetLeft+speedx+'px'
           node.style.top=node.offsetTop+speedy+'px'
       
           for(let j=0;j<topZhuan.children.length;j++){
              if(pen(ball,topZhuan.children[j])){
               //小球与砖碰撞
                     topZhuan.children[j].style.display='none'
                     speedy=speedy*(-1)
                     fen.value++
                }
            }
            },speed)
    }

    function drag(node){
        node.onmousedown=function (e){
            let offsetX=e.clientX-node.offsetLeft
            document.onmousemove=function(en){
             let e=en||window.event
             node.style.left=e.clientX
             if(e.clientX-offsetX<=0){
                 node.style.left=0+'px'
             }else if(e.clientX-offsetX>=300){
                 node.style.left=300+'px'
             }else{
                 node.style.left=e.clientX-offsetX+'px'
             }
            }
           }
           document.onmouseup=function(){
               document.onmousemove=null
           }
    }

    return {
        begin,start,no,fen
    }

  }
}
</script>

<style lang='less' scoped>
        .dz{
            width: 400px;
            display: flex;
            flex-wrap: wrap;
        }
        .box{
          position: relative;
          width: 400px;
          height: 400px;
          border: 1px solid black;
        }
        .ban{
            position: absolute;
            bottom: 0;
            left: 150px;
            width: 100px;
            height: 20px;
            text-align: center;
            background-color: cornflowerblue;
        }
        .ball{
            position: absolute;
            left: 200px;
            top:370px;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
        }
        .topZhuan{
            position: absolute;
            top: 0;
            left: 0;
        }
        .start{
            margin: 200px 100px;
            width: 200px;
            height: 50px;
            text-align: center;
            font-size: 20px;
        }
        .header{
            width: 400px;
            height: 25px;
            line-height: 25px;
            border: 2px solid #000;
            border-bottom: none;
            .no{
                color:aqua;
                font-size:22px;
            }
            .fen{
                float: right;
            }
        }
</style>